<template>
  <div>
    <template>
      <!--页头组件-->
      <el-page-header style="background-color: #0095d7;color: white;line-height: 60px"
                      @back="goBack" content="更改员工信息页面"></el-page-header>
      <!--分割线-->
      <el-divider></el-divider>
      <!--name代表上传文件时 文件的参数名
          limit="1" 设置只能选择一张图片
      -->
      <el-card>
        <el-form>
          <el-form-item label="用户名" label-width="80px">
            <el-input v-model="user.username" readonly></el-input>
          </el-form-item>
          <el-form-item label="姓名" label-width="80px">
            <el-input v-model="user.name" readonly></el-input>
          </el-form-item>
          <el-form-item label="身份证" label-width="80px">
            <el-input v-model="user.idNumber" readonly></el-input>
          </el-form-item>
          <el-form-item label="年龄" label-width="80px">
            <el-input v-model="user.age" readonly></el-input>
          </el-form-item>
          <el-form-item label="手机号" label-width="80px">
            <el-input v-model="user.phone" readonly></el-input>
          </el-form-item>
          <el-form-item label="邮箱" label-width="80px">
            <el-input v-model="user.email" readonly ></el-input>
          </el-form-item>
          <el-form-item label="身份" label-width="80px">
            <template>
              <el-select v-model="user.roleId" placeholder="请选择">
                <!--:label控制下拉选选项的文本内容 :value代表提交的值-->
                <el-option v-for="c in roleIdArr"
                           :label="c.name"
                           :value="c.roleId">
                </el-option>
              </el-select>
            </template>
          </el-form-item>
          <el-form-item label="状态" label-width="80px">
            <template>
              <el-select v-model="user.isEnable" placeholder="请选择">
                <!--:label控制下拉选选项的文本内容 :value代表提交的值-->
                <el-option v-for="c in isEnableArr"
                           :label="c.name"
                           :value="c.isEnable">
                </el-option>
              </el-select>
            </template>
          </el-form-item>

        </el-form>
        <el-button @click="update()">修改</el-button>
      </el-card>
    </template>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        username: this.$route.query.username,
        user:{
          id:"",
          username:"",
          name:"",
          idNumber:"",
          age:"",
          phone:"",
          email:"",
          isEnable:"",
          roleId:""
        },
        isEnableArr:[{name:'启用',isEnable:1},{name:'禁用',isEnable:0}],
        roleIdArr:[{name:'员工',roleId:2},{name:'普通用户',roleId:3}],
      }
    },
    created() {
      this.getData();
    },

    methods: {
      getData(){
        console.log("username========"+this.username)
        // 发请求获取员工信息
        // http://localhost:18080/user/details?username=username031
        let url = 'http://localhost:18080/user/details'
        let data = 'username='+ this.username
        this.axios.post(url,data).then( (response)=> {
          // 将得到的员工数据存储起来
          this.user = response.data.data;
        })
      },
      update(){
        let url = 'http://localhost:18080/user/updateUser'
        let data = 'id='+ this.user.id +
                    '&isEnable=' + this.user.isEnable +
                    '&roleId=' + this.user.roleId;
        this.axios.post(url,data).then((response)=> {
          this.user = response.data.data;
          this.$message({
            message: '修改成功',
            type: 'success'
          });
          // 提交之后返回到员工管理页面
          this.$router.push({path: '/admin/manage/user'});  //页面路由刷新
        })
      },
      goBack(){
        //返回上一页面
        history.back();
      }
    },
  }
</script>

<style>
  .el-input__inner {
    width: 500px;
  }
  .el-card{
    width: 100%;
    height: 100%;
  }
</style>